<template>
  <div class="guangzhou-map-container">
    <v-chart class="map-chart" :option="option" autoresize />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { GETNOBASE } from "@/api";

import mapjson from "/public/map-geojson/guangzhou.json"; // 你需要准备广州市的GeoJSON数据

const option = ref({});

const data = ref([
 { name: "天河区", value: 888 },
  { name: "越秀区", value: 210 },
  { name: "荔湾区", value: 100 },
  { name: "海珠区", value: 440 },
  { name: "白云区", value: 150 },
  { name: "黄埔区", value: 610 },
  { name: "番禺区", value: 922 },
  { name: "花都区", value: 123 },
  { name: "南沙区", value: 152 },
  { name: "从化区", value: 196 },
  { name: "增城区", value: 146 },
])

// 注册地图数据
const registerMap = async () => {
  // const mapjson: any = await GETNOBASE(`./map-geojson/guangzhou.json`).then(
  //   (data) => data
  // );
  console.log('mapjson', mapjson);
  echarts.registerMap("guangzhou", {
    geoJSON: mapjson as any,
    specialAreas: {},
  });
};

// 初始化地图配置
const initMapOption = () => {
  option.value = {
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>人数: {c}万人", // 这里可以根据实际数据调整
    },
    visualMap: {
      min: 0,
      max: data.value.reduce((max, item) => Math.max(max, item.value), 0), // 根据实际数据调整
      text: ["高", "低"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"],
      },
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "广州市",
        type: "map",
        map: "guangzhou",
        label: {
          show: true,
          color: "#fff",
          fontSize: 12,
        },
        emphasis: {
          label: {
            color: "#fff",
          },
          itemStyle: {
            areaColor: "#1890ff",
          },
        },
        data:data.value  
      },
    ],
  };
};

onMounted(async() => {
await  registerMap();
  initMapOption();
});
</script>

<style scoped>
.guangzhou-map-container {
  width: 100%;
  height: 100%;
}
.map-chart {
  width: 100%;
  height: 100%;
}
</style>
